<template>
  <view class="wrap">
    <view class="btnWrap">
      <view class="btn" @tap="typeHandle('index')">
        <img class="img" src="@/static/image/sdBtn.png" alt="" />
        <text class="name">打地鼠</text>
      </view>
      <view class="btn" @tap="typeHandle('game2')">
        <img class="img" src="@/static/image/sdBtn.png" alt="" />
        <text class="name">舒尔特方格</text>
      </view>
      <view class="btn" @tap="typeHandle('game3')">
        <img class="img" src="@/static/image/sdBtn.png" alt="" />
        <text class="name">数独</text>
      </view>
      <view class="btn" @tap="typeHandle('game4')">
        <img class="img" src="@/static/image/sdBtn.png" alt="" />
        <text class="name">石头剪刀布</text>
      </view>
      <view class="btn" @click="typeHandle('game5')">
        <img class="img" src="@/static/image/sdBtn.png" alt="" />
        <text class="name">记忆翻牌</text>
      </view>
      <view class="btn" @click="typeHandle('game6')">
        <img class="img" src="@/static/image/sdBtn.png" alt="" />
        <text class="name">数字划消</text>
      </view>
      <view class="btn" @click="typeHandle('game7')">
        <img class="img" src="@/static/image/sdBtn.png" alt="" />
        <text class="name">色彩冲突</text>
      </view>
      <view class="btn" @click="typeHandle('game8')">
        <img class="img" src="@/static/image/sdBtn.png" alt="" />
        <text class="name">形状匹配</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// import Calipers from '@/components/Calipers.vue'
// import FlowText from '@/components/FlowText.vue'
import { ref } from 'vue'
const title = ref('Hello123')

const onclick = () => {}

const typeHandle = (e: string) => {
  uni.navigateTo({
    url: `/pages/home/${e}`
  })
}
</script>

<style lang="scss" scoped>
@keyframes rotate-two {
  0% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.9);
  }
}

.wrap {
  position: relative;
  height: 100vh;
  background: #f0eadc;

  .btnWrap {
    display: flex;
    flex-wrap: wrap;
    padding: 0 32rpx;

    .btn {
      position: relative;
      width: 48%;
      height: 142rpx;
      margin-top: 50rpx;
      margin-right: 4%;
      line-height: 122rpx;
      color: #fff;
      text-align: center;
      animation: rotate-two 1s infinite;

      &:nth-child(2n + 2) {
        margin-right: 0;
      }

      .img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
      }

      .name {
        position: relative;
        z-index: 1;
      }
    }
  }
}
</style>
